.message-box{
    width: 100vw;
    height: 100vh;
    // background-color: rgb(228,228,228);
    background-color: #f5f5f5;
    
    .send-box{
        position: fixed;
        left: 0;
        bottom: 50px;
        display: flex;
        align-items: center;
        width: 100vw;
        height: 50px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fff;
        .send-input{
            
            
            
            // font-size: 14px;
            // background-color: red;
            input{
                border: 25px;
                height:40px;
                padding-left: 8px;
                font-size: 14px;
                border: 1px solid red;
                border-radius: 50px;
            }
        }
        span{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            // background-color: red;
        }
        .img{
            background-color: #00f;
            color: #fff;
            flex-shrink: 0;
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 40px;
        }
        .face{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 4px;
        }
        .send-btn{
            background-color: #da2339;
            color: #fff;
            width: 46px;
            height: 40px;
            font-size: 12px;
            padding: 0;
            border-color: #da2339;
            border-radius: 10px;
            flex-shrink: 0;
        }
    }

    
    .messagelist-box{
        width: 100vw;
        height: calc(100vh - 50px - 50px - 50px);
        background-color: skyblue;
        // 内容超出隐藏
        overflow-y: scroll;
        // img{
        //     width: 50px;
        //     height: 50px;
        //     border-radius: 50px;
        // }

        .messagelist{
            display: flex;
            flex-direction: column;
        .you-messageitem{
            display: flex;
            padding: 0 10px;
            margin-top: 14px;
            // 头像
            .customer-avatar{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-left:10px;
            }
            .customer-message{
                background-color: #fff;
                line-height: 20px;
                padding: 20px;
                margin: 20px 30px 0 10px;
                border-radius: 10px;
                border-bottom-left-radius: 0;
            }            
        }
        .me-messageitem{
            display: flex;
            padding: 0 10px;
            margin-top: 14px;
            flex-direction: row-reverse;
            // 头像
            .me-avatar{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-left:10px;
            }
            .me-message{
                background-color: #fff;
                line-height: 20px;
                padding: 20px;
                margin: 20px 10px 0 30px;
                border-radius: 10px;
                border-bottom-right-radius: 0;
            }            
        }   
        }
    }
}
